<template>
  <div v-if="model&&model.modelKey=='menuBox'" :key="model.modelKey" class="model_box top-menus">
    <div class="top-menus-inner flex " :style="`backgroundColor:${model.bgColor||''};${model.bgImage?('backgroundImage:url('+model.bgImage+');'):''}color:${model.txtColor||''}`" v-if="model.list&&model.list.length">
      <div class="item-menu" v-for="(item,i) in model.list" :key="i">
        <img :src="item.img" mode="" class="icon">
        <div class="menu-name">
          {{item.name}}
        </div>
      </div>
    </div>
    <div v-else  class="top-menus-inner" style="height: 140px;">
      <div  >
        <el-empty style="margin: 0 auto;padding: 0;" :image-size="80" description="暂无菜单"></el-empty>
      </div>
    </div>
    <zhezhao @clickSet="clickItem('set')"></zhezhao>
  </div>
</template>

<script>
import zhezhao from '../zhezhao.vue';
export default {
  components:{zhezhao},
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    clickItem(type) {
      this.$emit('clickItem', {type: type, modelKey: this.model.modelKey})
    }
  }
};
</script>
<style lang="scss" scoped>
.top-menus {
  text-align: center;
  overflow: hidden;
  width: 100%;
  .top-menus-inner {
    width: auto;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    flex-wrap: nowrap;
  }

  .item-menu {
    width: 82px;
    text-align: center;
    flex-shrink: 0;

  }

  .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 3px;
  }

  .menu-name {
    font-size: 14px;
  }
}
</style>